<style lang="less">
.activity-data {
	display: grid;
	grid-template-rows: 72px 160px 300px 300px 606px;
	row-gap: 12px;

	.activity-data__row {
		.activity-data__row-item {
			box-sizing: border-box;
			padding: 20px;
			height: 100%;
			background: #fff;
			border-radius: 2px;

			.activity-data__row-title {
				color: #262626;
				font-weight: 600;
				font-size: 16px;
				margin-bottom: 16px;

				&--more {
					color: #595959;
					font-size: 14px;
				}

				&--between {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.choose-time {
						color: #595959;
						font-size: 14px;

						.time {
							cursor: pointer;

							&.active {
								color: #386cff;
							}

							& + .time {
								margin-left: 16px;
							}
						}
					}
				}
			}
		}

		// 第一行
		&:nth-of-type(1) {
			.activity-data__row-item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.update-time {
					color: #101010;
					font-size: 14px;

					.update-time-title {
						margin-right: 8px;
						color: #808080;
					}
				}
			}
		}

		// 第二行
		&:nth-of-type(2) {
			.activity-data__row-content {
				height: 80px;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				column-gap: 12px;
				box-sizing: border-box;

				.content__item {
					background: #f4f5f7;
					border-radius: 2px;
					padding: 16px 16px 12px;
					min-width: 243px;

					.content__title {
						margin-bottom: 12px;
						line-height: 16px;
						color: #595959;
						font-size: 12px;

						&--between {
							display: flex;
							justify-content: space-between;
						}
					}

					.content__data {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.data__number {
							color: #262626;
							font-size: 20px;
							font-weight: 600;

							&--yellow {
								color: #ffb53c;
							}
						}

						.data__tip {
							color: #808080;
							font-size: 12px;

							&--red {
								color: #ff3c3c;
							}
						}
					}
				}
			}
		}

		// 第三、四行
		&:nth-of-type(3),
		&:nth-of-type(4) {
			.activity-data__row-content {
				height: 220px;
			}
		}

		// 第五行
		&:nth-of-type(5) {
			display: flex;

			.activity-data__row-item {
				flex: 1;
				min-width: 518px;

				& + .activity-data__row-item {
					margin-left: 12px;
				}

				.activity-data__row-content {
					height: 526px;

					.arco-table-element {
						.arco-table-tr {
							height: 48px;

							.arco-table-td {
								&:nth-of-type(2) {
									color: #386cff;
								}
							}
						}
					}
				}
			}
		}
	}

	.table_overflow {
		display: inline-block;
		max-width: 480px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>

<template>
	<div class="activity-data">
		<div class="activity-data__row">
			<div class="activity-data__row-item">
				<a-range-picker
					v-model="searchTime"
					style="width: 240px"
					show-time
					:time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					:allow-clear="false"
					@change="onSearchTimeChange"
				/>
			</div>
		</div>
		<div class="activity-data__row">
			<div class="activity-data__row-item">
				<p class="activity-data__row-title">用户数据</p>
				<div class="activity-data__row-content">
					<div v-for="it in activityData" :key="it.title" class="content__item">
						<p class="content__title content__title--between">{{ it.title }}</p>
						<template v-if="it.increaseTitle">
							<p class="content__data">
								<span class="data__number">{{ it.data }}</span>
								<span class="data__tip">{{ `${it.increaseTitle}: ${it.increaseData}` }}</span>
							</p>
						</template>
						<template v-else>
							<p class="content__data">
								<span class="data__number">{{ it.data }}</span>
							</p>
						</template>
					</div>
				</div>
			</div>
		</div>
		<div class="activity-data__row">
			<div class="activity-data__row-item">
				<p class="activity-data__row-title activity-data__row-title--between">
					<span> 活动新增 </span>
					<a-select
						v-model="echartsData['newAddActivity'].time"
						:style="{ width: '120px' }"
						@change="selectChange('newAddActivity')"
					>
						<a-option v-for="it in selectOptions" :key="it.value" :value="it.value">{{
							it.label
						}}</a-option>
					</a-select>
				</p>
				<div class="activity-data__row-content">
					<echarts-line series-name="活动新增" :data="echartsData['newAddActivity'].data" />
				</div>
			</div>
		</div>
		<div class="activity-data__row">
			<div class="activity-data__row-item">
				<p class="activity-data__row-title activity-data__row-title--between">
					<span> 活动时间分布 </span>
					<a-select
						v-model="echartsData['activityTime'].time"
						:style="{ width: '120px' }"
						@change="selectChange('activityTime')"
					>
						<a-option v-for="it in selectOptions" :key="it.value" :value="it.value">{{
							it.label
						}}</a-option>
					</a-select>
				</p>
				<div class="activity-data__row-content">
					<echarts-line series-name="活动举办数" :data="echartsData['activityTime'].data" />
				</div>
			</div>
		</div>
		<div class="activity-data__row">
			<div class="activity-data__row-item">
				<p class="activity-data__row-title">活动售票排行榜</p>
				<div class="activity-data__row-content">
					<a-table :columns="activityTicketColumns" :data="activityTicketData" :pagination="false">
						<template #sort="{ rowIndex }">{{ rowIndex + 1 }}</template>
						<template #title="{ record }">
							<a-tooltip :content="record.title">
								<a class="table_overflow" :href="activityLink(record.activityId)" target="_blank">{{
									record.title
								}}</a>
							</a-tooltip>
						</template>
					</a-table>
				</div>
			</div>
			<div class="activity-data__row-item">
				<p class="activity-data__row-title">活动参会排行榜</p>
				<div class="activity-data__row-content">
					<a-table :columns="activityPartakeColumns" :data="activityPartakeData" :pagination="false">
						<template #sort="{ rowIndex }">{{ rowIndex + 1 }}</template>
						<template #title="{ record }">
							<a class="table_overflow" :href="activityLink(record.activityId)" target="_blank">{{
								record.title
							}}</a>
						</template>
					</a-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { activity } from '@/api';
import config from '@/api/config';
import echartsLine from '@/components/echartsLine.vue';
import dateFormat from 'ourwill-feutil/common/dateFormat';

const activityData = reactive([
	{
		title: '活动总数（个）',
		data: '0',
		increaseTitle: '昨日新增',
		increaseData: '0',
	},
	{
		title: '日均活动创建数（个）',
		data: '0',
	},
	{
		title: '免费版活动数（个）',
		data: '0',
	},
	{
		title: '专业版活动数（个）',
		data: '0',
	},
]);

// 活动售票排行榜
const activityTicketColumns: any = [
	{
		title: '排行',
		slotName: 'sort',
		width: 60,
	},
	{
		title: '活动名称',
		slotName: 'title',
	},
	{
		title: '售票数',
		dataIndex: 'ticketNum',
		width: 80,
	},
];
const activityTicketData = ref([]);
// 活动参与排行榜
const activityPartakeColumns: any = [
	{
		title: '排行',
		slotName: 'sort',
		width: 30,
	},
	{
		title: '活动名称',
		slotName: 'title',
		width: 160,
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '参会人数',
		dataIndex: 'uv',
		width: 40,
		align: 'center',
	},
];
const activityPartakeData = ref([
	{
		sort: 1,
		activityName: '元宇宙大会',
		partakeCount: 0,
	},
	{
		sort: 2,
		activityName: '打工人必备！提高工作效率的电脑快捷键',
		partakeCount: 0,
	},
	{
		sort: 3,
		activityName: '来学习！10条你绝对不能打破的交互设计规则',
		partakeCount: 0,
	},
	{
		sort: 4,
		activityName: '最佳产品管理书籍在此，获取职场上升秘籍',
		partakeCount: 9999,
	},
	{
		sort: 5,
		activityName: '工作计划不会写？这个超赞工具送给你',
		partakeCount: 9999,
	},
	{
		sort: 6,
		activityName: '干货|学会写简历，轻松拿offer',
		partakeCount: 9999,
	},
	{
		sort: 7,
		activityName: '产品经理必备干货————实用高效沟通话术',
		partakeCount: 9999,
	},
	{
		sort: 8,
		activityName: '面试攻略：超级加分的10个面试满分小技巧',
		partakeCount: 9999,
	},
	{
		sort: 9,
		activityName: '【通知】必读，再不看就晚啦',
		partakeCount: 9999,
	},
	{
		sort: 10,
		activityName: '你必须知道的8种产品设计能力提升技巧',
		partakeCount: 9999,
	},
]);
const searchTime = ref([
	dateFormat(new Date().getTime() - 86400000 * 30, 'YYYY-MM-DD'),
	dateFormat(new Date().getTime(), 'YYYY-MM-DD'),
]);
const getActivityUserData = async () => {
	const params = {
		startDate: searchTime.value[0],
		endDate: searchTime.value[1],
	};
	const { ok, data } = await activity.getActivityUserData(params);
	if (!ok) {
		return;
	}
	activityData[0].data = data.data.activityNum;
	activityData[0].increaseData = data.data.yesterActivityNum;
	activityData[1].data = data.data.activityNumAvg;
	activityData[2].data = data.data.freeActivityNum;
	activityData[3].data = data.data.proActivityNum;
};
getActivityUserData();

const selectOptions = [
	{
		label: '按天',
		value: 1,
	},
	{
		label: '按月',
		value: 3,
	},
	{
		label: '按季',
		value: 4,
	},
];
const selectChange = (target: string) => {
	echartsData.value[target].dataMethod();
};
const echartsData: any = ref({
	activityTime: {
		time: 1,
		dataMethod: () => {
			getActivityTimeEchartsData();
		},
		data: [],
	},
	newAddActivity: {
		time: 1,
		dataMethod: () => {
			getActivityEchartsData();
		},
		data: [],
	},
});
const getActivityTimeEchartsData = async () => {
	const params = {
		startDate: searchTime.value[0],
		endDate: searchTime.value[1],
		type: echartsData.value['activityTime'].time,
	};
	const { ok, data } = await activity.getActivityTimeEchartsData(params);
	if (!ok) {
		return;
	}
	echartsData.value['activityTime'].data = data.data;
};
getActivityTimeEchartsData();
const getActivityEchartsData = async () => {
	const params = {
		startDate: searchTime.value[0],
		endDate: searchTime.value[1],
		type: echartsData.value['newAddActivity'].time,
	};
	const { ok, data } = await activity.getActivityEchartsData(params);
	if (!ok) {
		return;
	}
	echartsData.value['newAddActivity'].data = data.data;
};
getActivityEchartsData();

const getActivitySellTicket = async () => {
	const params = {
		startDate: searchTime.value[0],
		endDate: searchTime.value[1],
	};
	const { ok, data } = await activity.getActivitySellTicket(params);
	if (!ok) {
		return;
	}
	activityTicketData.value = data.data;
};
getActivitySellTicket();
const getActivityJoinMeeting = async () => {
	const params = {
		startDate: searchTime.value[0],
		endDate: searchTime.value[1],
	};
	const { ok, data } = await activity.getActivityJoinMeeting(params);
	if (!ok) {
		return;
	}
	activityPartakeData.value = data.data;
};

const activityLink = (activityId: string | number) => {
	if (activityId) {
		return `${config.host}/manage/#/index/activityManage/activity/${activityId}`;
	}
	return '';
};

getActivityJoinMeeting();
const onSearchTimeChange = () => {
	getActivityUserData();
	getActivityTimeEchartsData();
	getActivityEchartsData();
	getActivitySellTicket();
	getActivityJoinMeeting();
};
</script>
